<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="static/lib/showdown-master/dist/showdown.min.js"></script>
  <title>C客</title>
</head>
<body>
<div class="dialog">
  <!-- 弹窗内容 -->
  <div class="content">
    <div class="aclose">
      <span>提示</span>
      <a class="close" href="javascript:close();">&times;</a>
    </div>
    <div class="contain">

    </div>
    <div class="footer" style="gap: 20px">
      <button class="el-button button--primary" type="button" onclick="tclose()">确定</button>
      <button class="el-button button--default" type="button" onclick="tclose()">取消</button>

    </div>
  </div>
</div>
<div class="main" style="display: flex;flex-flow: column nowrap;">
  <div class="head" style="display:flex; flex-flow: row nowrap; justify-content: space-between;padding: 10px 25px ;background: #ffffff">
    <div class="left" style="display: flex;align-items: center;gap: 30px;">
      <div style="display: flex;align-items: center;">
        <div style="display: flex;align-items: center;">
          <div style="display:flex; align-items: center;cursor: pointer;" onclick=jump()>
            <img src="static/img/24-monkey.png" style="width: 30px; height: 30px;margin-right: 10px">
            <div style="font-size: 30px;font-family: FZShuTi;color: red; font-weight: bolder;padding: 0px">C</div>
            <div style="font-size: 30px;font-family: FZShuTi">SDN</div>
          </div>
        </div>
      </div>
      <div style="font-size:15px">博客</div>
      <div style="font-size:15px">开发者文库</div>
      <div style="font-size:15px">课程</div>
      <div style="font-size:15px">问答</div>
      <div style="font-size:15px">社区</div>
      <div style="font-size:15px">插件</div>
      <div style="font-size:15px">认证</div>
      <div style="font-size:15px">开源</div>
      <div class="search" style="background-color: white;display:flex;align-items: center">
        <input class="input" type="text" name="search" style="height: 30px;width: 200px;border: 1px solid #e9e9eb;border-radius:20px 0px 0px 20px;padding: 0px 20px;background-color: rgb(242,242,242)">
        <div style="display: flex;flex-flow: row nowrap;height: 32px;width: 100px;background-color: orangered;align-items: center;border-radius: 0px 20px 20px 0px">
          <img src="static/img/搜索.png" style="width: 17px;height: 17px;margin: 0px 5px 0px 20px">
          <view style="color:white;font-size: 17px;font-family: STSong;overflow:hidden;">搜索</view>
        </div>
      </div>
    </div>

    <div class="right" style="display: flex;align-items: center;gap: 30px;">
      <img src="static/img/头像%20男孩.png" style="width: 35px; height: 35px;margin-right: 10px;border-radius: 30px">
      <div style="display: flex; align-items: center">
        <div style="font-size:15px; margin-right: 2px">会员中心</div>
        <img src="static/img/礼物.png"  style="width: 15px; height: 15px;">
      </div>
      <div style="font-size:15px">足迹</div>
      <div style="font-size:15px">动态</div>
      <div style="font-size:15px">消息</div>
      <div class="create" style="display:flex;align-items: center;background-color: rgb(252,58,49);padding: 5px;border-radius: 20px;">
        <img src="static/img/用研.png" style="width: 25px; height: 20px;margin-left: 5px">
        <div style="font-size:15px;color: white;cursor: pointer;" onclick="writeArticle()">创作</div>
        <img src="static/img/下拉.png" style="width: 20px; height: 20px;">
      </div>
    </div>
  </div>
  <div class="body" style="display: flex; flex-flow: row nowrap;margin-top: 10px;gap: 10px">
    <div class="left" style=";width: 20%;margin-left:10%;display:flex;flex-flow: column nowrap;gap: 10px">
      <div class="block-one" style="display:flex;flex-flow: column nowrap;background-color: white;padding: 20px">
        <div style="display:flex;align-items: center;gap: 10px">
          <img src="static/img/头像%20男孩.png" style="width: 40px; height: 40px">
          <div style="font-size: 15px">我是小弱鸡</div>
        </div>
        <div class="line" style="margin: 20px 0px 10px"></div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div style="display:flex;flex-flow: column nowrap;align-items: center;gap:5px">
            <div style="font-size: 15px;font-weight:500;">1万+</div>
            <div style="color: #73767a;font-size:14px">积分</div>
          </div>
          <div style="display:flex;flex-flow: column nowrap;align-items: center;gap:5px">
            <div style="font-size: 15px;font-weight:500;">505</div>
            <div style="color: #73767a;font-size:14px">粉丝</div>
          </div>
          <div style="display:flex;flex-flow: column nowrap;align-items: center;gap:5px">
            <div style="font-size: 15px;font-weight:500;">565</div>
            <div style="color: #73767a;font-size:14px">获赞</div>
          </div>
          <div style="display:flex;flex-flow: column nowrap;align-items: center;gap:5px">
            <div style="font-size: 15px;font-weight:500;">569</div>
            <div style="color: #73767a;font-size:14px">评论</div>
          </div>
          <div style="display:flex;flex-flow: column nowrap;align-items: center;gap:5px">
            <div style="font-size: 15px;font-weight:500;">2654</div>
            <div style="color: #73767a;font-size:14px">收藏</div>
          </div>

        </div>
        <div style="display: flex;gap: 15px;margin: 10px 0px">
          <img src="static/img/金币.png" style="width: 30px;height: 30px">
          <img src="static/img/认证.png" style="width: 30px;height: 30px">
          <img src="static/img/收藏.png" style="width: 30px;height: 30px">
          <img src="static/img/会员.png" style="width: 30px;height: 30px">
        </div>
        <div style="display: flex;justify-content: space-between;margin-top:10px;gap: 20px">
          <div class="button" style="padding: 5px 45px;border: 1px solid #e9e9eb;font-size: 15px;border-radius: 20px">私信</div>
          <div class="button" style="padding: 5px 45px;border: 1px solid #e9e9eb;font-size: 15px;border-radius: 20px">关注</div>
        </div>
      </div>

      <div class="block two">
        <div class="search" style="background-color: white;display:flex;align-items: center">
          <input class="input" type="text" name="search" style="height: 30px;width: 180px;border: 1px solid #e9e9eb;border-radius:5px 0px 0px 5px;padding: 0px 20px;background-color: rgb(242,242,242)">
          <div style="display: flex;flex-flow: row nowrap;height: 32px;background-color: orangered;align-items: center;border-radius: 0px 5px 5px 0px">
            <img src="static/img/搜索.png" style="width: 17px;height: 17px;margin: 5px 6px">
          </div>
        </div>
      </div>


    </div>

    <div class="right" style="width: 60%;display:flex;flex-flow: column nowrap;">
      <div id="articleContent" style="display:flex;flex-flow: column nowrap;background-color: white;padding: 20px;gap: 10px">
<!--        <div class="title" style="font-weight: bold;font-size: 30px;">C语言</div>-->
<!--        <div class="article-info-box" style="display: flex;background: #f8f8f8;border-radius: 4px;gap:3px;align-items: center">-->
<!--          <img class="article-type-img" src="static/img/original.png" style="width:36px; height: 32px;line-height: 32px">-->
<!--          <div style="color:#606266;margin: 0px 10px">username</div>-->
<!--          <img src="static/img/newCurrentTime2.png" style="width:16px;line-height: 16px">-->
<!--          <span style="font-size: 14px;color:#909399">于&nbsp;2019-01-10 14:09:58&nbsp;发布</span>-->
<!--          <img src="static/img/articleReadEyes2.png" style="width:16px;height: 16px;margin-left:10px ">-->
<!--          <span style="font-size: 14px;color:#909399;margin-right:10px">792</span>-->
<!--          <img style="width:16px;height: 16px" src="static/img/tobarCollect2.png" >-->
<!--          <span style="font-size: 14px;color:#909399">收藏25</span>-->
<!--        </div>-->
<!--        <div id="content"  style="margin-top: 20px"></div>-->

      </div>
      <div class="article-tool-box" id="toolBarBox" style="display: flex;gap:10px;align-items: center;padding: 20px;background-color: white;justify-content: space-between">

      </div>
      <div id="articleCommentEdit" style="display: flex;flex-direction:column;background-color: white;padding: 20px;margin-top: 10px">


      </div>
      <div id="articleComment">

      </div>

    </div>
      <!-- 弹窗遮罩层 -->

  </div>
</div>
</body>
</html>
<script>
    var flag = 0;
    function show(str){
        var show = $(".dialog").css("display");
        $(".contain").text(str);
        $(".dialog").css("display",show =="none"?"block":"none");
    }
    function close(){
        var show = $(".dialog").css("display");
        $(".dialog").css("display",show =="none"?"block":"none");
        if(flag === 1){
            window.location.href = "/boke_war_exploded/Main.html?userid=" + urlparameter.userid + "&state=" + urlparameter.state ;
        } else if(flag === 2){
            window.location.href = "/boke_war_exploded/content.html?userid=" + urlparameter.userid + "&state=" + urlparameter.state + "&articleid=" + urlparameter.articleid;
        }
    }
    function tclose(){
        var show = $(".dialog").css("display");
        $(".dialog").css("display",show =="none"?"block":"none");
        if(flag === 1){
            window.location.href = "/boke_war_exploded/Main.html?userid=" + urlparameter.userid + "&state=" + urlparameter.state;
        } else if(flag === 2){
            window.location.href = "/boke_war_exploded/content.html?userid=" + urlparameter.userid + "&state=" + urlparameter.state + "&articleid=" + urlparameter.articleid;
        }
    }
    function jump(){
        window.location.href="/boke_war_exploded/Main.html?userid=" + urlparameter.userid +"&state=" + urlparameter.state;
    }
    var url = decodeURI(location.search);

    if(url.indexOf("?") != -1){
        str = url.substr(1);
        strs = str.split("&");
    }
    let urlparameter ={}
    for(let i = 0 ; i < strs.length; i ++){
        let temp = strs[i].split("=")
        urlparameter[temp[0]] = temp[1]
    }
    // console.log(test)
    $(document).ready(function(){
        $.ajax({
            type:"get",
            url:"LoadArticleContentServlet",
            dataType: "json",
            data:{
                userID: urlparameter.userid,
              articleID: urlparameter.articleid,
            },
            success: function(data){
                    let articleitem = data[0];
                    let articleTitle = articleitem.article.articleTitle;
                    let articleContent = articleitem.article.articleContent;
                    let articleID = articleitem.article.articleID;
                    let username = articleitem.username;
                    let articleView = articleitem.article.articleView;
                    let articleLike = articleitem.article.articleLike;
                    let articleCreateTime = articleitem.article.articleCreateTime;
                    let articleUserID = articleitem.article.userID;
                    let articleFavorite = articleitem.article.articleFavorite;
                    let articleComment = articleitem.article.articleComment;
                    let text = compile(articleContent);
                    if(data[1].isMine === true) {
                        $("#articleContent").append(
                            "      <div class=\"title\" style=\"font-weight: bold;font-size: 30px;\">" + articleTitle + "</div>\n" +
                            "      <div class=\"article-info-box\" style=\"display: flex;background: #f8f8f8;border-radius: 4px;gap:3px;align-items: center\">\n" +
                            "        <img class=\"article-type-img\" src=\"static/img/original.png\" style=\"width:36px; height: 32px;line-height: 32px\">\n" +
                            "        <div style=\"color:#606266;margin: 0px 10px\">username</div>\n" +
                            "        <img src=\"static/img/newCurrentTime2.png\" style=\"width:16px;line-height: 16px\">\n" +
                            "        <span style=\"font-size: 14px;color:#909399\">于&nbsp;" + articleCreateTime + "&nbsp;发布</span>\n" +
                            "        <img src=\"static/img/articleReadEyes2.png\" style=\"width:16px;height: 16px;margin-left:10px \">\n" +
                            "        <span style=\"font-size: 14px;color:#909399;margin-right:10px\">" + articleView + "</span>\n" +
                            "        <img style=\"width:16px;height: 16px\" src=\"static/img/tobarCollect2.png\" >\n" +
                            "        <span style=\"font-size: 14px;color:#909399;margin-right:10px\">收藏" + articleFavorite + "</span>\n" +
                            "        <img style=\"width:16px;height: 16px\" src=\"static/img/删除.png\" >\n" +
                            "        <span style=\"font-size: 14px;color:#909399;cursor: pointer\" onclick=deleteArticle(" + articleID +")>删除" + "</span>\n" +
                            "      </div>\n" +
                            "      <div id=\"content\"  style=\"margin-top: 20px\">" + text + "</div>"
                        );
                    } else {
                        $("#articleContent").append(
                            "      <div class=\"title\" style=\"font-weight: bold;font-size: 30px;\">" + articleTitle + "</div>\n" +
                            "      <div class=\"article-info-box\" style=\"display: flex;background: #f8f8f8;border-radius: 4px;gap:3px;align-items: center\">\n" +
                            "        <img class=\"article-type-img\" src=\"static/img/original.png\" style=\"width:36px; height: 32px;line-height: 32px\">\n" +
                            "        <div style=\"color:#606266;margin: 0px 10px\">username</div>\n" +
                            "        <img src=\"static/img/newCurrentTime2.png\" style=\"width:16px;line-height: 16px\">\n" +
                            "        <span style=\"font-size: 14px;color:#909399\">于&nbsp;" + articleCreateTime + "&nbsp;发布</span>\n" +
                            "        <img src=\"static/img/articleReadEyes2.png\" style=\"width:16px;height: 16px;margin-left:10px \">\n" +
                            "        <span style=\"font-size: 14px;color:#909399;margin-right:10px\">" + articleView + "</span>\n" +
                            "        <img style=\"width:16px;height: 16px\" src=\"static/img/tobarCollect2.png\" >\n" +
                            "        <span style=\"font-size: 14px;color:#909399\">收藏" + articleFavorite + "</span>\n" +
                            "      </div>\n" +
                            "      <div id=\"content\"  style=\"margin-top: 20px\">" + text + "</div>"
                        );
                    }
                    $("#toolBarBox").append(
                        "        <div class=\"toolbox-left\" style=\"display:flex;align-items: center\">\n" +
                        "          <img src=\"static/img/头像%20男孩.png\" style=\"width: 32px;height: 32px\">\n" +
                        "          <span style=\"color:#303133;margin: 0px 10px;font-weight: bold\">"+ username +"</span>\n" +
                        "          <button class=\"guanzhu\">关注</button>\n" +
                        "        </div>\n" +
                        "        <div class=\"toolbox-center\" style=\"display: flex;align-items: center;gap:6px;\">\n" +
                        "            <img class=\"image-button\" src=\"static/img/newHeart2021White.png\" style=\"width:30px;height: 30px\" onclick=update(" + articleID + ",\"ArticleLike\"" +")>\n" +
                        "            <span id=\"ArticleLike\" style=\"font-size: 14px;color:#909399;margin-right:10px;\">"+ articleLike +"</span>\n" +
                        "            <img class=\"image-button\" src=\"static/img/newUnHeart2021White.png\" style=\"width:30px;height: 30px\" >\n" +
                        "            <img class=\"image-button\" src=\"static/img/newComment2021White.png\" style=\"width:30px;height: 30px\" >\n" +
                        "            <span id=\"ArticleComment\" style=\"font-size: 14px;color:#909399;margin-right:10px\">"+ articleComment +"</span>\n" +
                        "            <img class=\"image-button\" src=\"static/img/newCollectWhite.png\" style=\"width:30px;height: 30px\" onclick=update(" + articleID + ",\"ArticleFavorite\"" +")>\n" +
                        "            <span id=\"ArticleFavorite\" style=\"font-size: 14px;color:#909399;margin-right:10px;\">"+ articleFavorite +"</span>\n" +
                        "          <button class=\"guanzhu\" style=\"margin-left: 20px\">项目专栏</button>\n" +
                        "        </div>"
                    )
                    $("#articleCommentEdit").append(
                        "        <div class=\"comment-title\" style=\"font-size:18px; font-weight: 600; color: #222226;line-height: 32px;margin-bottom: 8px\">参与评论</div>\n" +
                        "        <div class=\"comment-edit\" style=\"display:flex;align-items: center\">\n" +
                        "          <img src=\"static/img/头像%20男孩.png\" style=\"width: 32px;height: 32px\">\n" +
                        "          <div style=\"background-color: rgba(245,246,247,0.8);width: 100%;display: flex\">\n" +
                        "            <textarea id=\"commentContent0\" class=\"comment-content\" maxlength=\"1000\" placeholder=\"请发表有价值的评论， 博客评论不欢迎灌水，良好的社区氛围需大家一起维护。\"></textarea>\n" +
                        "            <div class=\"comment\" style=\"background-color:#dedfe0;margin: 5px;padding:2px 15px;border-radius:20px;cursor:pointer;width:50px;text-align: center\" onclick=\"comment(0,"+ articleID+"," + articleUserID + "," + 0 +")\">评论</div>\n" +
                        "          </div>\n" +
                        "        </div>"
                    )
                }
        })
        $.ajax({
            type: "get",
            dataType: "json",
            data: {
                articleID: urlparameter.articleid
            },
            url: "LoadArticleComment",

            success: function(data){
                console.log(data)
                if(data === null){
                    return
                }
                for(let i = 0; i < data.length; i ++){

                    let comment = data[i];
                    let commentItems = comment.commentItems;
                    let commentMain = comment.commentMain;
                    $("#articleComment").append(
                        "      <div id=\"mainComment" +commentMain.commentID+ "\"" + ">\n" +
                        "        <div style=\"display: flex;background-color: white;padding: 20px\">" +
                        "        <img src=\"static/img/头像%20男孩.png\" style=\"width: 32px;height: 32px\">\n" +
                        "        <div style=\"display:flex; flex-direction: column;margin-left: 10px;gap: 5px;width: 100%\">\n" +
                        "          <div class=\"title\" style=\"display: flex; font-size: 14px;color:#909399;justify-content: space-between\">\n" +
                        "            <div>"+commentMain.replyUsername + " " + commentMain.commentCreateTime +"</div>\n" +
                        "            <div style=\"margin-right: 20px;cursor:pointer\" onclick=\"reply("+ commentMain.commentID +")\">回复</div>\n" +
                        "          </div>\n" +
                        "          <div style=\"font-size: 16px\">"+ commentMain.commentContent +"</div>\n" +
                        "        <div id=\"commentEdit" + commentMain.commentID +"\"" + "class=\"noshow\">\n" +
                        "          <div style=\"background-color: rgba(245,246,247,0.8);width: 100%;display: flex\">\n" +
                        "            <textarea id=\"commentContent"+ commentMain.commentID+"\" class=\"comment-content\" maxlength=\"1000\" placeholder=\"请发表有价值的评论， 博客评论不欢迎灌水，良好的社区氛围需大家一起维护。\"></textarea>\n" +
                        "            <div class=\"comment\" style=\"background-color:#dedfe0;margin: 5px;padding:2px 15px;border-radius:20px;cursor:pointer;width:50px;text-align: center\" onclick=\"comment("+ commentMain.commentID + "," + commentMain.articleID+"," + commentMain.replyUserID + "," + commentMain.commentID +")\">评论</div>\n" +
                        "          </div>\n" +
                        "        </div>\n" +
                        "          <div id=\"replyComment" +commentMain.commentID+ "\"" + "style=\"display: flex;flex-direction: column\">\n" +
                        "          </div>\n" +
                        "        </div>\n" +
                        "        </div>\n" +
                        "      </div>"
                    );
                    for(let i = 0; i < commentItems.length; i ++){
                        let commentItem = commentItems[i];
                        $("#replyComment"+commentMain.commentID).append(
                            "          <div style=\"display: flex;margin-top: 10px;margin-left: -10px\">\n" +

                            "      <img src=\"static/img/头像%20男孩.png\" style=\"width: 25px;height: 25px\">\n" +
                            "      <div style=\"display:flex; flex-direction: column;margin-left: 10px;gap: 5px;width: 100%\">\n" +
                            "        <div class=\"title\" style=\"display: flex; font-size: 14px;color:#909399;justify-content: space-between\">\n" +
                            "          <div style=\"display: flex;gap:6px\">\n" +
                            "            <div>"+ commentItem.replyUsername +"</div>\n" +
                            "            <div style=\"color:#A8ABB2\">回复</div>\n" +
                            "            <div>"+ commentItem.byReplyUsername +"</div>\n" +
                            "            <div style=\"margin-left: 10px\">"+ commentItem.commentCreateTime+"</div>\n" +
                            "          </div>\n" +
                            "          <div style=\"margin-right: 20px;cursor:pointer\" onclick=\"reply("+ commentItem.commentID +")\">回复</div>\n" +
                            "        </div>\n" +
                            "        <div style=\"font-size: 16px\">"+ commentItem.commentContent+"</div>\n" +
                            "        <div id=\"commentEdit" + commentItem.commentID +"\"" + "class=\"noshow\">\n" +
                            "          <div style=\"background-color: rgba(245,246,247,0.8);width: 100%;display: flex\">\n" +
                            "            <textarea id=\"commentContent"+ commentItem.commentID+"\" class=\"comment-content\" maxlength=\"1000\" placeholder=\"请发表有价值的评论， 博客评论不欢迎灌水，良好的社区氛围需大家一起维护。\"></textarea>\n" +
                            "            <div class=\"comment\" style=\"background-color:#dedfe0;margin: 5px;padding:2px 15px;border-radius:20px;cursor:pointer;width:50px;text-align: center\" onclick=\"comment("+ commentItem.commentID +"," +commentItem.articleID+"," + commentItem.replyUserID + "," + commentItem.commentParentID +")\">评论</div>\n" +
                            "          </div>\n" +
                            "        </div>\n" +
                            "          </div>"
                        )

                    }

                }
            }

        })
    })
    function compile(text) {
//        获取想要转换的文字
//        创建实例
        var converter = new showdown.Converter();
//        进行转换
        var html = converter.makeHtml(text);

//        将内容显示到指定的地方
        return html;
    }
    function writeArticle(){
        window.location.href="/boke_war_exploded/ReleaseArticle.html?userid=" + urlparameter.userid +"&state=" + urlparameter.state;
    }
    // let articleIsClick = {
    //     "isArticleLike": false,
    //     "isArticleFavorite": false
    // };
    let articleIsClick = {};
    articleIsClick["isArticleLike"] = false;
    articleIsClick["isArticleFavorite"] = false;
    //用[]形式键值对里面的key 能用变量来访问
    let operation = "";
    function update(articleID,articleFieldValue){
        let count = $("#" + articleFieldValue).text();
        if(articleIsClick["is" + articleFieldValue] === false){
            operation  = "add";
            articleIsClick["is" + articleFieldValue] = true;
            $("#" + articleFieldValue).text( parseInt(count) + 1);
        } else {
            operation = "subtraction";
            articleIsClick["is" + articleFieldValue] = false;
            $("#" + articleFieldValue).text( parseInt(count) - 1);
        }

        $.ajax({
            type: "get",
            dataType: "text",
            data: {
                articleID: articleID,
                articleFieldValue: articleFieldValue,
                operation: operation
            },
            url:"UpdateArticleFieldValue",
            success: function(res){
                console.log(res + "11111")
            }

        })

    }
    function comment(commentID,articleID, byReplyUserID, commentParentID){
        console.log(urlparameter)
        if(urlparameter.state === '2'){
            show("您已被禁言！");
            return;
        }
        if ($("#commentContent" + commentID).val() === "") {
            show("评论内容不能为空！");
            return false;
        }
        $.ajax({
            type:"get",
            dataType: "text",
            data:{
                articleID: articleID,
                commentContent: $("#commentContent" + commentID).val(),
                replyUserID: urlparameter.userid,
                byReplyUserID: byReplyUserID,
                commentParentID: commentParentID

            },
            url:"UploadArticleComment",
            success: function(res){
                flag = 2
                show("发表评论成功！");
                console.log(res)
            }

        })
        $("#commentContent" + commentID).val("")
    }
    let lastCommentID = "";
    let currentCommentID = 0
    function reply(commentID){
        console.log(commentID)
        currentCommentID = commentID;
        $("#commentEdit" + lastCommentID).removeClass("show");
        $("#commentEdit" + lastCommentID).addClass("noshow");
        $("#commentEdit" + currentCommentID).addClass("show")
        lastCommentID = commentID;
    }
    function deleteArticle(articleID){
        $.ajax({
            type: "get",
            dataType: "text",
            data:{
                ArticleID: articleID
            },
            url:"delArticleServlet",
            success: function(res){
                flag = 1;
                show("删除文章成功")
            }
        })
    }
</script>
<style>

    .dialog {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);

    }

    .dialog .content {
        display: flex;
        flex-direction: column;
        width: 500px;
        /*height: 300px;*/
        margin: 100px auto;
        background-color: #fefefe;
        /*border-radius: 10px;*/
    }
    .button--primary{
        color: #fff !important;
        background-color: #409eff !important;
        border-color: #409eff !important;
    }
    .button--primary:hover{
        background-color: #79bbff !important;
        border-color: #79bbff !important;
    }
    .button--default:hover{
      background-color: #ecf5ff;
        border-color:  #d9ecff;
        color:  #79bbff;
    }
    .el-button{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
    .dialog .aclose{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px 10px;
    }
    .dialog .aclose span{
        line-height: 24px;
        font-size: 18px;
        color: #303133;
    }
    .dialog .contain{
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }

    .dialog .close {
        color: #aaa;
        margin-right: 15px;
        font-size: 25px;
        font-weight: normal;
        text-decoration: none;
    }
    .dialog .close:hover {
        color: dodgerblue;
    }
    .dialog .footer{
        padding: 10px 20px 20px;
        display: flex;
        flex-direction: row-reverse;

    }

  body{
    margin: 0px;
    background: rgb(242,242,242);
  }
  .line{
    font-size: 20px;height: 1px;
    background-color: #d4d4d4;
    color: rgba(101, 101, 101, 1);
  }
  .input:hover {
      border-color:red !important;
      background-color: white !important;
  }
  .input:focus{
      outline: none;
      background-color: white !important;
  }
  .button:hover{
      border: 1px solid #000000 !important;
      cursor: pointer;
  }
  .comment:hover{
      background-color: orangered !important;
      color: #e9e9eb!important;
  }
  .image-button:hover{
      cursor: pointer;
  }
  .noshow{
      display:none
  }
  .show{
      display: flex;
      align-items: center;
  }
  .block{
    display:flex;
    flex-flow: column nowrap;
    background-color: white;
    padding: 20px
  }
  button{
      cursor: pointer;
  }
  .comment-content{
      outline: none;
      display: block;
      background-color: rgba(248,249,251,0.8);
      width: 100%;
      border: none;
      padding: 4px 0px 4px 12px;
      resize: none;
      height: 30px;
      font-size: 14px;
      line-height: 22px;
      font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  }
  .guanzhu{
      padding: 2px 20px;
      display: block;
      min-width: 60px;
      background: #fff;
      border-radius: 16px;
      font-size: 14px;
      line-height: 28px;
      text-align: center;
      border: 1px solid #ccccd8;
      color: #555666;
  }
</style>